<template>
  <div class="filter-item-checkbox tag-container">
    <div class="tag-item-container">
      <div class="hot-tag">
        <el-checkbox-group v-model="item.checkedList" class="filter-checkbox-group" text-color="#fd3264" fill="#fd3264" @change="changeFilter(item)">
          <div class="el-checkbox">
            <span v-if="item.checkedList.length === 0" class="check-box-btn active"><span class="check-box-style"/><span class="el-checkbox__label">全部</span></span>
            <span v-else class="check-box-btn" @click.stop="cancelSelect(item)"><span class="check-box-style"/><span class="el-checkbox__label">全部</span></span>
          </div>
          <el-checkbox
            v-for="(value) in hotTag"
            :key="value.key"
            :label="value.key"
          >
            <el-tooltip :open-delay="800" placement="top">
              <span slot="content" style="max-width:200px;">{{ value.label }}</span>
              <span class="tool-tip-content">{{ value.label }}</span>
            </el-tooltip>
          </el-checkbox>
          <template v-if="isOpen">
            <el-checkbox
              v-for="(value) in tagList"
              :key="value.key"
              :label="value.key"
            >
              {{ value.label }}
            </el-checkbox>
          </template>
        </el-checkbox-group>
        <span v-if="tagList.length" class="extend-btn" @click="tabOpen">{{ isOpen?'收起':'展开' }} <i :class="{'open':isOpen}" class="el-icon-arrow-down icon"/></span>
      </div>
      <!-- <div v-if="isOpen">
        <el-checkbox-group v-model="item.checkedList" class="filter-checkbox-group" text-color="#fd3264" fill="#fd3264" @change="changeFilter(item)">
          <el-checkbox
            v-for="(value) in tagList"
            :key="value.key"
            :label="value.key"
          >
            {{ value.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'TagSelect',
  props: {
    defaultTag: {
      type: Array,
      default: () => {
        return ['美妆', '时尚', '美食', '母婴', '生活方式', '测评', '种草', '数码', '运动健身', 'vlog', '--'];
      }
    },
    item: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      hotTag: [],
      tagList: [],
      isOpen: false
    };
  },
  watch: {
    item: function(newValue, old) {
      this.getHotTag(newValue);
      this.isOpen = false;
    }
  },
  created() {
    if (this.item) {
      this.getHotTag(this.item);
    }
  },
  methods: {
    getHotTag(data) {
      const valueList = this.parse(data.valueList);
      const defaultTag = this.defaultTag;
      if (data.key === 'label') {
        if (valueList && valueList.length > 0) {
          const hotTag = defaultTag.map(i => {
            return {
              key: i,
              label: i
            };
          });
          const tagList = valueList.filter(i => {
            return !defaultTag.includes(i.key);
          });
          this.hotTag = hotTag;
          this.tagList = tagList;
        } else {
          this.hotTag = [];
          this.tagList = [];
        }
      } else {
        const hotTag = valueList.splice(0, 3);
        if (hotTag.length > 0 && hotTag[0].key === '--') {
          hotTag.push(hotTag.shift());
        }
        this.hotTag = hotTag;
        this.tagList = valueList;
      }
    },
    parse(data) {
      try {
        return JSON.parse(JSON.stringify(data));
      } catch (error) {
        return data;
      }
    },
    tabOpen() {
      this.isOpen = !this.isOpen;
    },
    cancelSelect(item) {
      this.$emit('cancelSelect', item);
    },
    changeFilter(item) {
      this.$emit('changeFilter', item);
    }
  }
};
</script>
<style lang="scss" scoped>
.tag-container {
  width: 100%;
}
.tag-item-container {
  flex: 1;
}
.hot-tag {
  display: flex;
}
</style>
